<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="../common/vue.min.js" type="text/javascript"></script>
    <script src="../common/vue-router.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- 使用指令 v-link 进行导航。 -->
        <a v-link="{ path: '/foo' }">Go to Foo</a>
        <a v-link="{ path: '/bar' }">Go to Bar</a>
    </p>
    <!-- 路由外链 -->
    <router-view></router-view>
</div>

<script>
    // 定义组件
    var Foo = Vue.extend({
        template: '<p>This is foo!</p>'
    })

    var Bar = Vue.extend({
        template: '<p>This is bar!</p>'
    })

    Vue.component('hook-example',{
        route:{
            activate: function (transition) {
                console.log('hook-example actived!!');
                transition.next();
            },
            deactivate: function (transition) {
                console.log('hook-example deactivated!')
                transition.next()
            }
        }
    })

    // 路由器需要一个根组件。
    // 出于演示的目的，这里使用一个空的组件，直接使用 HTML 作为应用的模板
    var App = Vue.extend({})

    // 创建一个路由器实例
    // 创建实例时可以传入配置参数进行定制，为保持简单，这里使用默认配置
    var router = new VueRouter()

    // 定义路由规则
    // 每条路由规则应该映射到一个组件。这里的“组件”可以是一个使用 Vue.extend
    // 创建的组件构造函数，也可以是一个组件选项对象。
    // 稍后我们会讲解嵌套路由
    router.map({
        '/foo': {
            component: Foo
        },
        '/bar': {
            component: Bar
        }
    })

    // 现在我们可以启动应用了！
    // 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。
    router.start(App, '#app')
</script>
</body>
</html>